// 编辑资产 服务器存储 
<template>
  <div class="userBox" id="uploadtu2">
    <div class="bg-fff">
      <el-form class="pAll" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" v-loading="loading">
        <el-row style="border-top: 1px solid #f2f2f2; padding-top: 25px">
          <el-col :span="2">
            <span class="title">资产信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产名称:" prop="ZCMC">
              <el-input v-model.trim="ruleForm.ZCMC" clearable placeholder="资产名称"></el-input>
            </el-form-item>
            <el-form-item label="系统类型:" prop="XTLX">
              <el-select v-model.trim="ruleForm.XTLX" clearable filterable placeholder="请选择/搜索" class="inputSelect">
                <el-option v-for="item in systemOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="协议类型:" prop="XYLX">
              <el-select ref="SNMPType" v-model.trim="ruleForm.XYLX" @change="agreementChange" clearable filterable placeholder="请选择/搜索" class="inputSelect">
                <el-option v-for="item in agreementOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="IP地址:" prop="IP">
              <el-input v-model.trim="ruleForm.IP" clearable placeholder="设备IP地址"></el-input>
            </el-form-item>
            <el-form-item label="端口:" prop="GLDK">
              <el-input v-model.trim="ruleForm.GLDK" clearable placeholder="65535"></el-input>
            </el-form-item>
            <el-form-item label="SNMP版本:" prop="SNMPBB" v-show="isShowxy">
              <el-select v-model.trim="ruleForm.SNMPBB" clearable filterable placeholder="请选择/搜索" class="inputSelect">
                <el-option v-for="item in SNMPOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="SNMP密钥:" prop="SNMPMY" v-show="isShowxy">
              <el-input v-model.trim="ruleForm.SNMPMY" clearable placeholder="SNMP密钥"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="辖区(安装地址):" prop="XQBM">
              <el-cascader
                v-show="showcity"
                v-model.trim="ruleForm.XQBM"
                ref="cascaderList"
                class="inputSelect"
                style="margin-right: 10px"
                clearable
                @change="handleChange"
                @visible-change="visibleChange"
                :props="{
                  lazy: true,
                  lazyLoad: lazyLoadAdd,
                }"
              ></el-cascader>
              <el-input v-show="!showcity" v-model="xianxidizhi" class="inputSelect" disabled style="margin-right: 10px"></el-input>
              <el-button class="btnSizeStyle" type="primary" plain size="small" @click="selectCity">选择</el-button>
            </el-form-item>
            <el-form-item label="详细地址:">
              <el-input type="textarea" :rows="4" resize="none" show-word-limit :maxlength="100" v-model.trim="ruleForm.XXDZ" placeholder="请输入设备安装详细地址信息"></el-input>
            </el-form-item>
            <el-form-item label="资产状态:" prop="type">
              <el-radio-group v-model.trim="ruleForm.ZCZT">
                <el-radio label="1">使用中</el-radio>
                <el-radio label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="资产图片:">
              <el-upload
                ref="upload"
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                :on-change="lalal"
                :file-list="fileList"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <span class="el-upload__tip">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="2">
            <span class="title">厂家信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产厂家:" prop="CJ">
              <el-select @change="xzpp" v-model.trim="ruleForm.CJ" :no-data-text="tiText3" clearable filterable placeholder="选择厂家" class="inputSelect">
                <el-option v-for="item in cjOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="品牌:" prop="PP">
              <el-select v-model.trim="ruleForm.PP" :no-data-text="tiText4" clearable :disabled="ruleForm.CJ === '' ? true : false" filterable placeholder="品牌" class="inputSelect">
                <el-option v-for="item in ppmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="型号:" prop="XH">
              <el-input v-model.trim="ruleForm.XH" clearable placeholder="型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="出厂日期:">
              <el-date-picker v-model="ruleForm.CCRQ" :picker-options="pickerBeginDateBefore" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="inputSelect"></el-date-picker>
            </el-form-item>
            <el-form-item label="维保期限:" prop="BXQ">
              <el-input-number v-model.trim="ruleForm.BXQ" placeholder="请输入" controls-position="right" :min="0" :max="5 * 12" size="medium"></el-input-number>
              <span style="margin-left: 10px">个月</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="2">
            <span class="title">其他信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属合同:">
              <el-select v-model.trim="ruleForm.HT_ID" :no-data-text="tiText1" clearable filterable placeholder="资产所属合同" class="inputSelect">
                <el-option v-for="item in hetonOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="承建单位:">
              <el-select v-model.trim="ruleForm.CJDW" :no-data-text="tiText2" clearable filterable placeholder="选择承建单位" class="inputSelect">
                <el-option v-for="item in jgOptions2" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="安装时间:">
              <el-date-picker v-model.trim="ruleForm.AZRQ" :picker-options="pickerBeginDateBefore" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="inputSelect"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="使用单位:" prop="SYDW">
              <el-select v-model.trim="ruleForm.SYDW" :no-data-text="tiText2" disabled placeholder="使用单位" class="inputSelect3">
                <el-option v-for="item in jgOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运维单位:">
              <el-select v-model.trim="ruleForm.YWDW" :no-data-text="tiText2" clearable filterable placeholder="选择运维单位" class="inputSelect">
                <el-option v-for="item in jgOptions3" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="fooer_btn">
          <el-button class="btnSizeStyle" size="medium" @click="goBack">取消</el-button>
          <el-button class="btnSizeStyle" type="primary" :loading="saveBtnLoad" size="medium" @click="baoCun('ruleForm')" v-preventReClick>保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { linkageCity } from '@/utils/linkageCity.js'
import { ziC, pinT, upload } from '@/utils/allUrl.js'
import { startLoading, endLoading } from '@/utils/loading.js'
import { timeLoad } from '@/assets/js/setTime'
export default {
  props: ['zclxForm'],
  data: function () {
    return {
      // 修改资产ID
      xiuID: '',
      // 品牌
      ppmcOptions: [],
      // 合同
      hetonOptions: [],
      // 机构
      jgOptions: [],
      // 承建
      jgOptions2: [],
      // 运维
      jgOptions3: [],
      // 厂家
      cjOptions: [],
      // 系统类型
      systemOptions: [
        {
          value: 'linux',
          label: 'linux',
        },
        {
          value: 'windows',
          label: 'windows',
        },
      ],
      // 协议类型
      agreementOptions: [
        {
          value: '客户端',
          label: '客户端',
        },
        {
          value: 'SNMP',
          label: 'SNMP',
        },
        {
          value: 'JMX',
          label: 'JMX',
        },
        {
          value: 'IPMI',
          label: 'IPMI',
        },
      ],
      // SNMP版本
      SNMPOptions: [
        {
          value: 'SNMPv2',
          label: 'SNMPv2',
        },
      ],
      // 加载
      loading: false,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      ruleForm: {
        ZCMC: '', // 资产名称
        CJ: '', // 厂家
        PP: '', // 品牌
        XH: '', // 型号
        XQBM: '', // 辖区编码
        XXDZ: '', // 详细地址
        CCRQ: '', // 出场日期
        AZRQ: '', // 安装日期
        ZCZT: '1', // 资产状态
        SYDW: '', // 使用单位
        CJDW: '', // 承建单位
        YWDW: '', // 运维单位
        HT_ID: '', // 所属合同
        BXQ: 0, // 维保期
        XTLX: 'linux', // 系统类型
        XYLX: 'SNMP', // 协议类型
        IP: '', // IP地址
        GLDK: '', // 端口
        SNMPBB: 'SNMPv2', // SNMP版本
        SNMPMY: '', // SNMP密钥
      },
      rules: {
        ZCMC: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { max: 255, message: '长度在 255 个字符之间', trigger: 'blur' },
        ],
        XQBM: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        XTLX: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        XYLX: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        IP: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { pattern: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/, message: '请输入正确的IP地址', trigger: 'blur' },
        ],
        GLDK: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' },
        ],
        SYDW: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        CJ: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        PP: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        XH: [{ required: true, message: '此次为必填项', trigger: 'blur' }],
        BXQ: [{ pattern: /^-?[0-9]\d*$/, message: '不能输入小数', trigger: 'blur' }],
        SNMPBB: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        SNMPMY: [{ required: true, message: '此次为必填项', trigger: 'blur' }],
      },
      title: '添加资产', // 标题
      //  图片上传
      imgUrl: [],
      fileList: [], // 上传图片列表
      dialogVisible: false,
      dialogImageUrl: '', // 预览
      isShowxy: false, // 协议类型显隐
      xianxidizhi: '', // 字符串地址信息
      showcity: false, // 选择辖区
      xqbmValue: '',
      diziValue: '',
      tiText1: '暂无数据', // 合同提示
      tiText2: '暂无数据', // 机构提示
      tiText3: '暂无数据', // 厂家提示
      tiText4: '暂无数据', // 品牌提示
      saveBtnLoad: false, // 保存loading 防止重复点击
      saveBtnTime: null,
    }
  },
  created: function () {
    // 获取合同
    this.getht()
    // 获取机构
    this.getjg()
    // 获取厂家
    this.getcj()
    // 运维单位
    this.yunwei()
    // 承建单位
    this.chengjian()
  },
  watch: {
    zclxForm: {
      deep: true,
      handler(newVal, oldVal) {
        if (this.title === '编辑资产') {
          //   this.sxjyz(newVal.ZCLX)
        }
      },
    },
    saveBtnLoad(newVal, oldVal) {
      this.saveBtnTime = setTimeout(() => {
        if (this.saveBtnLoad) {
          this.saveBtnLoad = false
        }
      }, timeLoad)
    }, // 保存
  },
  mounted() {
    const { title, content } = this.$route.query
    if (!this.ruleForm.SYDW) {
      this.ruleForm.SYDW = JSON.parse(getUrl('userconter')).zzjg_ID
    }
    this.title = title
    if (content) {
      this.xiuID = content
      this.setList(content, true)
    } else {
      this.ruleForm.XQBM = JSON.parse(getUrl('userconter')).xqbm
      this.agreementChange(this.$refs.SNMPType.value)
    }
  },
  methods: {
    // 转换时间格式
    detaTiem(value) {
      if (value) {
        const dt = new Date(value)
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, 0)
        const d = (dt.getDate() + '').padStart(2, 0)
        return `${y}-${m}-${d}`
      } else {
        return ''
      }
    },
    async lazyLoadAdd(node, resolve) {
      const user = JSON.parse(getUrl('userconter'))
      if (node.level === 0) {
        return resolve(await linkageCity(user.id, node.level + 1))
      } else if (node.level === 1) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 2) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 3) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value, node.label))
      }
    },
    handleChange(e) {
      this.$nextTick(() => {
        const vals = this.$refs.cascaderList.presentText
        if (vals) {
          this.xianxidizhi = vals
        } else {
          this.xianxidizhi = this.diziValue
        }
        if (e.length === 0) {
          this.showcity = false
          this.ruleForm.XQBM = this.xqbmValue
        }
      })
    },
    // 获取编辑资产数据
    async setList(id, type) {
      const params = new URLSearchParams()
      params.append('ID', id)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectByID`, params)
      if (res.code === '0000') {
        const xiucontent = res.data
        this.getpp(xiucontent.cj)
        this.agreementChange(xiucontent.xylx || 'SNMP')
        // 获取品牌
        if (xiucontent.zzzp) {
          const cao = xiucontent.zzzp.replace(/uid/g, 'name')
          this.fileList = JSON.parse(cao)
          this.imgUrl = this.fileList
        }
        this.xianxidizhi = xiucontent.sfmc + ' / ' + xiucontent.csmc + ' / ' + xiucontent.qxmc + ' / ' + xiucontent.xzjdmc
        this.xqbmValue = xiucontent.ssq_NO - ''
        this.diziValue = this.xianxidizhi
        if (type) {
          this.ruleForm = {
            ZCMC: xiucontent.zcmc,
            CJ: xiucontent.cj - '',
            PP: xiucontent.pp_ID,
            XH: xiucontent.xh,
            XQBM: xiucontent.ssq_NO - '',
            XXDZ: xiucontent.xxdz || '',
            CCRQ: this.detaTiem(xiucontent.ccrq),
            AZRQ: this.detaTiem(xiucontent.azrq),
            ZCZT: xiucontent.zczt,
            BXQ: xiucontent.bxq,
            SYDW: xiucontent.sydw,
            CJDW: xiucontent.cjdw === 0 ? '' : xiucontent.cjdw,
            YWDW: xiucontent.ywdw === 0 ? '' : xiucontent.ywdw,
            HT_ID: xiucontent.ht_ID === 0 ? '' : xiucontent.ht_ID,
            XTLX: xiucontent.xtlx || 'linux',
            XYLX: xiucontent.xylx || 'SNMP',
            IP: xiucontent.ip || '',
            GLDK: xiucontent.gldk || '',
            SNMPBB: xiucontent.snmpbb || 'SNMPv2',
            SNMPMY: xiucontent.snmpmy || '',
          }
        }
      } else {
        this.ruleForm = {
          ZCMC: '',
          CJ: '',
          PP: '',
          XH: '',
          XQBM: '',
          XXDZ: '',
          CCRQ: '',
          AZRQ: '',
          ZCZT: '',
          GBBM: '',
          SBBM: '',
          BXQ: '',
          SYDW: '',
          CJDW: '',
          YWDW: '',
          HT_ID: '',
          XTLX: 'linux',
          XYLX: 'SNMP',
          IP: '',
          GLDK: '',
          SNMPBB: 'SNMPv2',
          SNMPMY: '',
        }
        this.tableMessage = res.message
      }
    },
    // 获取合同
    async getht() {
      const { data: res } = await this.$http.post(`${pinT}htgl/list`)
      const arr = []
      if (res.code !== '0000') {
        this.hetonOptions = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.htmc,
          }
          arr.push(k)
        })
        this.hetonOptions = arr
      }
    },
    xzpp(val) {
      this.ruleForm.PP = ''
      this.getpp(val)
    },
    // 获取品牌
    async getpp(id) {
      const params = new URLSearchParams()
      params.append('SCCJ', id)
      const { data: res } = await this.$http.post(`${ziC}pp/list`, params)
      const arr = []
      if (res.code !== '0000') {
        this.ppmcOptions = []
        this.tiText4 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.ppmc,
          }
          arr.push(k)
        })
        this.ppmcOptions = arr
      }
    },
    // 获取机构
    async getjg() {
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`)
      const arr = [] // 全部
      if (res.code !== '0000') {
        this.jgOptions = []
        this.tiText2 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k)
        })
        this.jgOptions = arr
      }
    },
    async yunwei() {
      const params = new URLSearchParams()
      params.append('jglx', 4)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = [] // 运维
      if (res.code !== '0000') {
        this.jgOptions3 = []
        this.tiText2 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k2 = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k2)
        })
        this.jgOptions3 = arr
      }
    },
    async chengjian() {
      const params = new URLSearchParams()
      params.append('jglx', 3)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = [] // 承建
      if (res.code !== '0000') {
        this.jgOptions2 = []
        this.tiText2 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k3 = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k3)
        })
        this.jgOptions2 = arr
      }
    },
    // 获取厂家
    async getcj() {
      // 业主 45
      // 生产 6
      // 承建 3
      // 运营 4
      // 第三方承建  5
      const params = new URLSearchParams()
      params.append('jglx', 6)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = []
      if (res.code !== '0000') {
        this.cjOptions = []
        this.tiText3 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k)
        })
        this.cjOptions = arr
      }
    },
    // 删除图片
    handleRemove(a) {
      const index = this.imgUrl.findIndex((item) => item.uid === a.uid)
      this.imgUrl.splice(index, 1)
    },
    // 添加图片
    async lalal(el) {
      let videoSize = el.size / (1024 * 1024) // 转成M格式
      videoSize = videoSize.toFixed(1) // 保留小数点后一位
      if (videoSize > 2) {
        const dele = this.$refs.upload.uploadFiles
        const index = dele.findIndex((item) => item.uid === el.uid)
        dele.splice(index, 1)
        // this.$refs.upload.uploadFiles
        return this.$message({
          type: 'error',
          message: '图片超过最大限制2M',
          center: true,
        })
      } else {
        startLoading(document.getElementById('uploadtu2'))
        const file = el.raw
        const fd = new FormData()
        let arr = {}
        fd.append('file', file) // 传文件
        fd.append('type', 0) // 传文件
        const { data: res } = await this.$http.post(`${upload}`, fd)
        endLoading()
        if (res.code === '0000') {
          res.data.forEach((item) => {
            arr = {
              uid: el.uid,
              url: item,
            }
          })
          this.imgUrl.push(arr)
        } else {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
        }
      }
    },
    // 预览
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url
      this.dialogVisible = true
    },
    baoCun(ruleForm) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          clearTimeout(this.saveBtnTime)
          this.saveBtnLoad = true
          if (this.title === '添加资产') {
            const { ZCMC, CJ, PP, XH, XQBM, XXDZ, CCRQ, AZRQ, ZCZT, BXQ, SYDW, CJDW, YWDW, HT_ID, XTLX, XYLX, IP, GLDK, SNMPBB, SNMPMY } = this.ruleForm
            const params = new URLSearchParams()
            params.append('ZCLX', this.zclxForm.ZCLX[this.zclxForm.ZCLX.length - 1] || 0)
            params.append('ZCMC', ZCMC)
            params.append('CJ', CJ)
            params.append('PP_ID', PP)
            params.append('XH', XH)
            params.append('XXDZ', XXDZ)
            params.append('CCRQ', CCRQ)
            params.append('AZRQ', AZRQ)
            params.append('ZCZT', ZCZT)
            params.append('BXQ', BXQ || 0)
            params.append('SYDW', SYDW || 0)
            params.append('CJDW', CJDW || 0)
            params.append('YWDW', YWDW || 0)
            params.append('imgs', JSON.stringify(this.imgUrl))
            params.append('HT_ID', HT_ID || 0)
            params.append('IP', IP)
            params.append('GLDK', GLDK)
            params.append('XTLX', XTLX || 0)
            params.append('XYLX', XYLX || 0)
            if (XYLX === 'SNMP') {
              params.append('SNMPBB', SNMPBB || 0)
              params.append('SNMPMY', SNMPMY || '')
            } else {
              params.append('SNMPBB', 'SNMPv2')
              params.append('SNMPMY', '')
            }
            if (XQBM.length === 3) {
              params.append('SF', XQBM[0])
              params.append('CS', XQBM[1])
              params.append('QX', XQBM[2])
              params.append('SSQ_NO', XQBM[2])
            } else if (XQBM.length === 4) {
              params.append('SF', XQBM[0])
              params.append('CS', XQBM[1])
              params.append('QX', XQBM[2])
              params.append('XZJD', XQBM[3])
              params.append('SSQ_NO', XQBM[3])
            }
            const { data: res } = await this.$http.post(`${ziC}zcgl/insertZiChan`, params)
            this.saveBtnLoad = false
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          } else {
            const { ZCMC, CJ, PP, XH, XQBM, XXDZ, CCRQ, AZRQ, ZCZT, BXQ, SYDW, CJDW, YWDW, HT_ID, XTLX, XYLX, IP, GLDK, SNMPBB, SNMPMY } = this.ruleForm
            const params2 = new URLSearchParams()
            if (typeof this.zclxForm.ZCLX !== 'number') {
              params2.append('ZCLX', this.zclxForm.ZCLX[this.zclxForm.ZCLX.length - 1] || 0)
            } else {
              params2.append('ZCLX', this.zclxForm.ZCLX || 0)
            }
            params2.append('ID', this.xiuID)
            params2.append('ZCMC', ZCMC)
            params2.append('CJ', CJ)
            params2.append('PP_ID', PP)
            params2.append('XH', XH)
            params2.append('XXDZ', XXDZ)
            params2.append('CCRQ', CCRQ)
            params2.append('AZRQ', AZRQ)
            params2.append('ZCZT', ZCZT)
            params2.append('BXQ', BXQ || 0)
            params2.append('SYDW', SYDW || 0)
            params2.append('CJDW', CJDW || 0)
            params2.append('YWDW', YWDW || 0)
            params2.append('imgs', JSON.stringify(this.imgUrl))
            params2.append('HT_ID', HT_ID || 0)
            params2.append('IP', IP)
            params2.append('GLDK', GLDK)
            params2.append('XTLX', XTLX || 0)
            params2.append('XYLX', XYLX || 0)
            if (XYLX === 'SNMP') {
              params2.append('SNMPBB', SNMPBB || 0)
              params2.append('SNMPMY', SNMPMY || '')
            } else {
              params2.append('SNMPBB', 'SNMPv2')
              params2.append('SNMPMY', '')
            }
            // params2.append('SNMPBB', SNMPBB || 0)
            // params2.append('SNMPMY', SNMPMY || '')
            if (typeof XQBM !== 'number') {
              if (XQBM.length === 3) {
                params2.append('SF', XQBM[0])
                params2.append('CS', XQBM[1])
                params2.append('QX', XQBM[2])
                params2.append('SSQ_NO', XQBM[2])
              } else if (XQBM.length === 4) {
                params2.append('SF', XQBM[0])
                params2.append('CS', XQBM[1])
                params2.append('QX', XQBM[2])
                params2.append('XZJD', XQBM[3])
                params2.append('SSQ_NO', XQBM[3])
              }
            } else {
              const s = (XQBM + '').substr(0, 2) + '0000'
              const c = (XQBM + '').substr(0, 4) + '00'
              const x = (XQBM + '').substr(0, 6)
              params2.append('SF', s)
              params2.append('CS', c)
              params2.append('QX', x)
              if ((XQBM + '').length > 6) {
                params2.append('XZJD', XQBM)
                params2.append('SSQ_NO', XQBM)
              } else {
                params2.append('SSQ_NO', x)
              }
            }
            const { data: res } = await this.$http.post(`${ziC}zcgl/updateZiChan`, params2)
            this.saveBtnLoad = false
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          }
        } else {
          return this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
        }
      })
    },
    // 协议类型改变
    agreementChange(val) {
      if (val === 'SNMP') {
        this.isShowxy = true
        this.rules.SNMPBB = [{ required: true, message: '此次为必填项', trigger: 'change' }]
        this.rules.SNMPMY = [{ required: true, message: '此次为必填项', trigger: 'blur' }]
      } else {
        this.isShowxy = false
        this.rules.SNMPBB = [{ required: false, message: '此次为必填项', trigger: 'change' }]
        this.rules.SNMPMY = [{ required: false, message: '此次为必填项', trigger: 'blur' }]
      }
    },
    goBack: function () {
      // this.$router.push('/propertyList')
      this.$router.push({
        name: 'propertyList',
        params: {
          pingpai: this.$route.query.pingpai, // 品牌
          zicanglx: this.$route.query.zicanglx, // 资产类型
          zicanZT: this.$route.query.zicanZT, // 资产状态
          azTime: this.$route.query.azTime, // 安装时间
          sous: this.$route.query.sous, // 资产名称/ip/sn号
          // currentPage: this.$route.query.currentPage, // 当前页
          // pageSize: this.$route.query.pageSize, // 页码
        },
      })
    },
    selectCity() {
      this.showcity = true
      this.$refs.cascaderList.toggleDropDownVisible()
    },
    visibleChange(val) {
      if (!val) {
        this.showcity = false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .inputSelect3 .el-input__suffix {
  opacity: 0;
}
.userBox {
  .el-row {
    border-bottom: 1px solid #f2f2f2;
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
    .el-form-item {
      .inputSelect {
        width: 260px;
      }
      .inputSelect2 {
        width: 390px;
      }
      .inputSelect3 {
        width: 260px;
      }
      .jinDuTitle {
        height: 18px;
        line-height: 22px;
        color: #c0c4cc;
      }
      .iconBtn {
        margin-left: 10px;
        font-size: 15px;
        color: rgba(187, 187, 187, 1);
        cursor: pointer;
      }
      .DuFen {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .btnGs {
          margin: 0 10px;
        }
      }
      .el-upload__tip {
        font-size: 12px;
        color: #a1a3a8;
        margin-top: 7px;
        padding-left: 10px;
      }
    }
    .pilian_btn {
      position: relative;
      width: 258%;
      top: -25px;
      left: 65px;
      padding: 0 18px;
      background-color: #fffbe6;
      > div {
        height: 30px;
        line-height: 30px;
        color: #e28b02;
        .xiaBtn {
          padding: 0;
        }
      }
    }
    .konBox {
      height: 68px;
    }
    .shebeima {
      padding: 0;
      margin-bottom: 10px;
    }
    .shebeima2 {
      padding: 0;
      margin: 0;
    }
  }
  .fooer_btn {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
